Adwaita: entry shadows work.
authorLapo Calamandrei <calamandrei@gmail.com>
Mon, 7 Jul 2014 15:21:52 +0000 (17:21 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Mon, 7 Jul 2014 15:27:57 +0000 (17:27 +0200)
For the transition to work the box-shadows types in the shadow list
needs to be matched in various states so I'm using transparent shadows
istead of resetting them when not needed.

gtk/resources/theme/Adwaita/_drawing.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index 1b7562e0297d6f706b3571ee800555d057e0c4e3..3d386ef13d2ad70f914f58aa89bc6729954b962e 100644 (file)
@@ -34,13 +34,23 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
   background-image: linear-gradient(to bottom,
                                     darken($base_color,3%),
                                     $base_color 90%);
+  // we need to match the same shadow types (inset/outset) in various states
+  // hence transparent shadows istead of resetting them when not needed
+  $_blank_inner_shadows: inset 0 2px 2px -2px transparentize(
+                                                mix(black, $base_color, 50%),1),
+                         inset 0 0 2px 1px transparentize(
+                                             mix($fc,$base_color),1);
+  $_blank_edge: if($noedge, none, 0 1px transparentize(white,1));
+
   $_entry_edge: $widget_edge;
   @if $noedge { $_entry_edge: none; }
   
   @if $t==normal {
     border-color: $borders_color;
     @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
+                      inset 0 0 2px 1px transparentize(mix($fc,$base_color),1),
                       $_entry_edge);
+    // the second transparent shadow is needed for the transition to work
   }
   @if $t==focus {
     @if $variant == 'light' {
@@ -62,17 +72,18 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     color: $insensitive_fg_color;
     border-color: $borders_color;
     background-image: linear-gradient(to bottom, $insensitive_bg_color);
-    @include _shadows($_entry_edge);
+    @include _shadows($_blank_inner_shadows, $_entry_edge);
+
   }
   @if $t==backdrop {
     color: $backdrop_fg_color;
     background-image: linear-gradient(to bottom, $backdrop_base_color);
-    box-shadow: 0 1px transparentize(white,1);
+    @include _shadows($_blank_inner_shadows, $_blank_edge);
   }
   @if $t==backdrop-insensitive {
     color: $backdrop_insensitive_color;
     background-image: linear-gradient(to bottom, $backdrop_bg_color);
-    box-shadow: 0 1px transparentize(white,1);
+    @include _shadows($_blank_inner_shadows, $_blank_edge);
   }
 }
 
index b3682d6e54d494d8dd9a4708911b514ffddcf185..08a1955ab75537dbd34ea4d277a0f32574356c0a 100644 (file)
   border-width: 1px;
   background-image: linear-gradient(to bottom, #212121, #292929 90%);
   border-color: #1c1f1f;
-  box-shadow: inset 0 2px 2px -2px #141414, 0 1px rgba(238, 238, 236, 0.1); }
+  box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(238, 238, 236, 0.1); }
   .entry.flat, .entry.flat:focus {
     padding: 2px;
     background-color: transparent;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     border-color: #1c1f1f;
-    box-shadow: inset 0 2px 2px -2px #141414;
+    box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(37, 67, 98, 0);
     border: none;
     border-radius: 0; }
   .entry:focus {
     color: #939695;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #323636);
-    box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(238, 238, 236, 0.1); }
   .entry:backdrop {
     background-color: transparent;
     border-style: solid;
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     color: #c9cbc9;
     background-image: linear-gradient(to bottom, #2c2c2c);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
     background-color: transparent;
     border-style: solid;
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     color: #454c4c;
     background-image: linear-gradient(to bottom, #393f3f);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(255, 255, 255, 0); }
   .entry:selected, .entry:backdrop:selected {
     background-color: #215d9c;
     color: white; }
@@ -2244,7 +2244,7 @@ GtkLevelBar.vertical {
   border-width: 1px;
   background-image: linear-gradient(to bottom, #212121, #292929 90%);
   border-color: #1c1f1f;
-  box-shadow: inset 0 2px 2px -2px #141414, 0 1px rgba(238, 238, 236, 0.1); }
+  box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(238, 238, 236, 0.1); }
   .level-bar.trough:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -2252,7 +2252,7 @@ GtkLevelBar.vertical {
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     color: #c9cbc9;
     background-image: linear-gradient(to bottom, #2c2c2c);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(255, 255, 255, 0); }
 .level-bar.fill-block {
   border-width: 1px;
   border-style: solid;
index 2c513654d63b3b72898149155a356d1fceeed97e..cad9be7cf51194069e55863c2508df7288994ffe 100644 (file)
   border-width: 1px;
   background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
   border-color: #a1a1a1;
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white; }
+  box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px white; }
   .entry.flat, .entry.flat:focus {
     padding: 2px;
     background-color: transparent;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     border-color: #a1a1a1;
-    box-shadow: inset 0 2px 2px -2px #7f7f7f;
+    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(164, 199, 236, 0);
     border: none;
     border-radius: 0; }
   .entry:focus {
     color: #8d9091;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #f4f4f4);
-    box-shadow: 0 1px white; }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px white; }
   .entry:backdrop {
     background-color: transparent;
     border-style: solid;
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #54595a;
     background-image: linear-gradient(to bottom, #fcfcfc);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
     background-color: transparent;
     border-style: solid;
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #c7c7c7;
     background-image: linear-gradient(to bottom, #ededed);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px rgba(255, 255, 255, 0); }
   .entry:selected, .entry:backdrop:selected {
     background-color: #4a90d9;
     color: white; }
@@ -2235,7 +2235,7 @@ GtkLevelBar.vertical {
   border-width: 1px;
   background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
   border-color: #a1a1a1;
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white; }
+  box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px white; }
   .level-bar.trough:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -2243,7 +2243,7 @@ GtkLevelBar.vertical {
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #54595a;
     background-image: linear-gradient(to bottom, #fcfcfc);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px rgba(255, 255, 255, 0); }
 .level-bar.fill-block {
   border-width: 1px;
   border-style: solid;